<template>
  <page-frame>
    <div class="MCManage">
      <div class="toptitle">
        <div class="left" style="padding-bottom:1px;">优待证审核</div>
        <div class="right">
          <div class="btns"></div>
        </div>
      </div>
      <div class="borderT"></div>
      <div class="file-main">
        <div class="input">
          <el-row class="query">
            <el-col style="width: 130px;">
              <div class="input-item">
                <el-select style="width:90%!important;" @change="selectItem" @clear="clearItem" v-model="fileId"
                           clearable placeholder="选择筛选项">
                  <el-option
                    v-for="item in fileList"
                    :label="item.fileName"
                    :value="item.fileId">
                  </el-option>
                </el-select>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="input-item" v-show="fileId=='1'">
                <el-input v-model="queryData.memberName" @keyup.enter.native="loadTableData" placeholder="请输入老人姓名">
                </el-input>
              </div>
              <div class="input-item" v-show="fileId=='2'">
                <el-input v-model="queryData.NO" @keyup.enter.native="loadTableData" placeholder="请输入优待证编号">
                </el-input>
              </div>
              <div class="input-item" v-show="fileId=='3'">
                <el-input v-model="queryData.phone" @keyup.enter.native="loadTableData" placeholder="请输入联系方式">
                </el-input>
              </div>
            </el-col>
            <el-col :span="2">
              <el-button class="query lightGreenBtn" @click="loadTableData">搜索</el-button>
            </el-col>
          </el-row>
        </div>
        <div class="tabs">
          <el-table
            :data="tableData"
            border
            highlight-current-row
            style="width: 100%">
            <el-table-column
              prop="memberNo"
              label="优待证编号"
              min-width=""
            >
            </el-table-column>
            <el-table-column
              prop="memberName"
              label="老人姓名"
              min-width=""
            >
            </el-table-column>
            <el-table-column
              prop="add"
              label="家庭地址"
            >
            </el-table-column>
            <el-table-column
              prop="phone"
              label="联系方式"
              width=""
            >
            </el-table-column>
            <el-table-column
              prop="time"
              label="办理时间"
              min-width=""
            >
            </el-table-column>
            <el-table-column
              prop="people"
              label="评估人员"
            >
            </el-table-column>
            <el-table-column
              prop="operating"
              label="操作"
              width="120"
            >
              <template scope="scope">
                <!--<el-button type="text" size="small" >查看</el-button>-->
                <el-button type="text" size="small" @click.stop="view">通过</el-button>
                <el-button type="text" size="small" @click.stop="Reject">拒绝</el-button>
              </template>
            </el-table-column>

          </el-table>

          <!--分页-->
          <div class="pagination">
            <div class="block">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChangePage"
                :current-page="currentPage"
                :page-size="10"
                layout="total, prev, pager, next"
                :total="total">
              </el-pagination>
            </div>
          </div>

          <el-dialog title="通过" :visible.sync="pass" size="tiny">
            <div class="consultingNewComplaint">
              <div class="file-content">
               <div style="text-align: center;font-weight:bold;font-size:16px;margin-bottom: 15px;">确认通以下老人的优待证的申请</div>
                <el-row>
                  <div style="width:65%;margin:0 auto;">
                    <el-form ref="passForm" :model="passForm" label-width="80px">
                      <el-form-item label="老人姓名">
                        <span v-model="passForm.name">{{passForm.name}}</span>
                      </el-form-item>
                      <el-form-item label="身份证号">
                        <span v-model="passForm.ID">{{passForm.ID}}</span>
                      </el-form-item>
                      <el-form-item label="老人住址">
                        <span v-model="passForm.add">{{passForm.add}}</span>
                      </el-form-item>
                      <el-form-item label="备注">
                        <el-input type="textarea" v-model="passForm.remark"></el-input>
                      </el-form-item>
                    </el-form>
                  </div>
                </el-row>
              </div>
            </div>
            <div slot="footer" class="dialog-footer">
              <el-button @click="pass=false">取 消</el-button>
              <el-button type="primary" @click="pass=false">确 定</el-button>
            </div>
          </el-dialog>

          <el-dialog title="拒绝" :visible.sync="reject" size="tiny">
            <div class="consultingNewComplaint">
              <div class="file-content">
                <el-row>
                  <div style="width:80%;margin:0 auto;">
                    <el-form ref="rejectForm" :model="rejectForm" label-width="80px">

                      <el-form-item label="拒绝理由">
                        <el-input
                          type="textarea"
                          v-model="rejectForm.remark"
                          :rows="4">
                        </el-input>
                      </el-form-item>
                    </el-form>
                  </div>
                </el-row>
              </div>
            </div>
            <div slot="footer" class="dialog-footer">
              <el-button @click="reject=false">取 消</el-button>
              <el-button type="primary" @click="reject=false">确 定</el-button>
            </div>
          </el-dialog>
        </div>
      </div>
    </div>
  </page-frame>
</template>

<script>
  export default {
    data() {
      return {
        queryData:{
          memberName:'',
          NO:'',
          phone:''
        },
        fileId:1,
        fileList: [{
          fileId: 1,
          fileName: "老人姓名"
        }, {
          fileId: 2,
          fileName: "优待证编号",
        }, {
          fileId: 3,
          fileName: "联系方式",
        }],
        tableData:[{
          memberNo:'XK19910001',
          memberName:'张三',
          add:'上海市张江汤臣豪园II期1号楼2楼',
          phone:'15800988726',
          time:'2017/11/10 14:00',
          people:'里顺丰、翟腾',
        },{
          memberNo:'XK19910002',
          memberName:'张四',
          add:'上海市张江汤臣豪园II期1号楼3楼',
          phone:'15800988720',
          time:'2017/11/10 15:00',
          people:'李四',
          status:'待发放',
          issuer:'李志',
        },{
          memberNo:'XK19910003',
          memberName:'王五',
          add:'上海市浦东新区碧波路230号3楼',
          phone:'18077289100',
          time:'2017/11/10 15:00',
          people:'王五、赵六',
          status:'待发放',
          issuer:'李志',
        },{
          memberNo:'XK19910004',
          memberName:'赵六',
          add:'上海市浦东新区碧波路230号4楼',
          phone:'18077289200',
          time:'2017/11/10 17:00',
          people:'王五、赵六',
          status:'待发放',
          issuer:'李志',
        }],
        pass:false,
        passForm:{
          name:'张国富/男/67岁',
          ID:'610122195504050998',
          add:'上海市碧波路250号3号楼2楼',
          remark:''
        },
        reject:false,
        rejectForm:{
          remark:''
        },
        total:4,
        currentPage:1,
      }
    },
    methods:{
      init() {

      },
      loadTableData(){

      },
      /**
       * 选择项目
       */
      selectItem(){
        //清空选项

      },
      view(){
        this.pass = true;
      },
      Reject(){
        this.reject = true;
      },
      handleClose(done) {
//        this.$refs['dialogRuleForm'].resetFields();
//        done();
      },
      clearItem(){
        this.selectItem();
      },
      handleSizeChange(val) {

      },
      handleCurrentChangePage(val) {
        this.currentPage = val;
      },
    },
    mounted: function () {
      this.init();
    },
  }
</script>

<style>
.MCManage .el-dialog .el-form-item{
  margin-bottom:0px!important;
}
</style>
